<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-10-25 11:44:46
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-03 14:10:45
 * @FilePath: /nhw/src/views/Assignment/components/FilesComp.vue
-->
<template>
  <div class="files-comp-container">
    <div v-for="(item, index) in files" :key="index">
      <div v-if="item.renderType == 'images' && item.value" class="pic-wrap">
        <Field label="现场照片" readonly class="bordernone" colon />
        <div class="img-wrap">
          <VanImage
            v-for="(imgUrl, i) in item.value.split(',')"
            :key="'finishPic' + i"
            width="2.8rem"
            height="2.8rem"
            :src="/nhw/ + imgUrl"
            @click="imagePreview(item.value.split(','), i)"
          />
        </div>
      </div>
      <div v-else-if="item.renderType == 'videos'" class="video-wrap">
        <Field label="现场视频" readonly class="bordernone" colon />
        <div class="img-wrap">
          <PrevVideo :videoUrl="/nhw/ + item.value" :control="false" />
        </div>
      </div>
      <Field
        v-else
        :value="item.value"
        :label="item.label"
        :type="item.renderType"
        readonly
        colon
        border
      />
    </div>
  </div>
</template>

<script>
import PrevVideo from "components/PrevVideo";
import { Field, Image as VanImage, ImagePreview } from "vant";

export default {
  name: "FilesComp",
  components: { PrevVideo, Field, VanImage },
  data() {
    return {};
  },
  props: {
    files: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // pic() {
    //   const value = this.files.filter((item) => item.renderType == "images")[0]
    //     .value;
    //   return value ? value.split(",") : [];
    // },
  },
  mounted() {},

  methods: {
    //图片预览
    imagePreview(urlArr, index) {
      // let urlArr = this.pic.map((item) => {
      //   return "/nhw/" + item;
      // });
      ImagePreview(urlArr, index);
    },
  },
};
</script>

<style lang="less" scoped>
.files-comp-container {
  width: 100%;
  background: #fff;
  .img-wrap {
    padding: 0 24px;
  }
}
</style>